<template>
	<div class="inOutyewumonth" ref='inOutyewumonth'>
		<h2 class="titleSelf">跨境电商进出口业务量月度走势</h2>

		<div class="contentSelf" ref='contentSelf'>
			<div class="btnTab">
				<span :class="tableInOut?'active':''" @click="tableInOutFn($event)">进口</span>
				<span :class="!tableInOut?'active':''" @click="tableInOutFn($event)">出口</span>
			</div>



			<div ref="inyewumonthChart" class="inOutyewumonthChart" v-if="tableInOut"></div>
			<div ref="outyewumonthChart" class="inOutyewumonthChart" v-if="!tableInOut"></div>



		</div>

	</div>

</template>

<script>
	export default {
		name: 'inOutyewumonth',
		components: {

		},
		data() {
			return {
				tableInOut: true
			}
		},
		mounted() {

			this.getInEchartData()
			this.getOutEchartData()
			// this.getOutEchartData()
			var that = this;
			setInterval(function(){
				that.tableInOut = !that.tableInOut;
				if (that.tableInOut) {
					that.$nextTick(() => {
						that.getInEchartData()
					})
				
				} else {
					that.$nextTick(() => {
						that.getOutEchartData()
					})
				}
			},5000)

		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();
			
			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			tableInOutFn(e) {
				let tabid = e.target.dataset.id;
				this.tableInOut = !this.tableInOut;
				if (this.tableInOut) {
					this.$nextTick(() => {
						this.getInEchartData()
					})

				} else {
					this.$nextTick(() => {
						this.getOutEchartData()
					})

				}
			},
			getInEchartData() {

				const inyewumonthChart = this.$refs.inyewumonthChart;
				if (inyewumonthChart) {
					const myChart = this.$echarts.init(inyewumonthChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy()[0]+'-'+that.commonFunction.getLastYearYestdy()[1];
					var endDate = that.commonFunction.formatDate()[0]+'-'+that.commonFunction.formatDate()[1];
					// console.log(startDate, endDate)
					that.$myHttp.get("getBusinessTrendsInfo", {
							params: {
								dtype: 'M',
								start: startDate,
								end: endDate,
								ie: 'I'
							}
						})
						.then(function(data0) {
							if (data0.status == "200") {
								// console.log(data0.data.result.hn_business_trends)
								var getDatas = data0.data.result.hn_business_trends;
								
								var datas = {
									name:[],
									huozhi:[],
									danliang:[],
								};
								// console.log( getDatas)
								getDatas.forEach((item,index)=>{
									datas['name'].push(item.REPORTDATE)
									datas['huozhi'].push((item.GOODVALUE/10000).toFixed(2))
									datas['danliang'].push((item.AMOUNT/10000).toFixed(2))
								})
								
								const option = {
									tooltip: {
										trigger: 'axis',
										axisPointer: {
											type: 'cross',
											crossStyle: {
												color: '#999'
											}
										}
									},
								
									legend: {
										data: ['进口货值', '单量'],
										show: true,
										// icon: "plain",
										top: that.commonFunction.fontSize(0.1),
										right: "16%",
										itemWidth: that.commonFunction.fontSize(0.2),
										itemHeight: that.commonFunction.fontSize(0.1),
										itemGap: that.commonFunction.fontSize(0.1),
										textStyle: {
											color: '#fff',
											fontSize: that.commonFunction.fontSize(0.12),
										}
									},
									grid: {
										left: '15%',
										top: '20%',
										bottom: '20%',
										right: '10%'
									},
									xAxis: [{
										type: 'category',
										data: datas['name'],
										axisLabel: {
											margin: 10,
											color: '#fec400',
											textStyle: {
												fontSize: that.commonFunction.fontSize(0.1),
											},
											rotate: '30',
										},
										axisLine: {
											show: false,
											lineStyle: {
												color: '#fec400',
												fontSize: that.commonFunction.fontSize(0.12),
											}
										},
										axisTick: {
											show: false
										},
								
									}],
									yAxis: [{
											type: 'value',
											name: '货值(万元)',
											nameTextStyle: {
												color: '#fff',
												padding: [0, 0, 0, -that.commonFunction.fontSize(0.2)],
												fontSize: that.commonFunction.fontSize(0.12),
											},
											// min: 0,
											// max: 250,
											// interval: 50,
								
											axisLabel: {
												color: '#ffffff80',
												textStyle: {
													fontSize: that.commonFunction.fontSize(0.12),
												},
												// formatter: '{value} ml'
											},
											axisLine: {
												show: false
											},
											axisTick: {
												show: false
											},
											splitLine: {
												show: true,
												show: true,
												lineStyle: {
													color: '#ffffff80',
													width: 0.5,
													// type: 'dashed',
												}
											}
										},
										{
											type: 'value',
											name: '单量(万包)',
											nameTextStyle: {
												color: '#00fce6',
												fontSize: that.commonFunction.fontSize(0.12),
												// padding: [-that.commonFunction.fontSize(0.4), 0, 0, that.commonFunction.fontSize(0.4)],
												margin: [-that.commonFunction.fontSize(0.6), 0, 0, that.commonFunction
													.fontSize(0.6)
												],
											},
											// min: 0,
											// max: 25,
											// interval: 5,
											axisLabel: {
												color: '#00fce6',
												textStyle: {
													fontSize: that.commonFunction.fontSize(0.12),
												},
												// formatter: '{value} °C'
											},
											axisLine: {
												show: false,
											},
											axisTick: {
												show: false
											},
											splitLine: {
												lineStyle: {
													// color: '#00fce6',
													color: 'rgba(211,217,219,0.6)',
													width: 0.5,
													// type: 'dashed',
												}
											}
										}
									],
									series: [{
											name: '进口货值',
											type: 'bar',
											data: datas['huozhi'],
											barWidth: '12px',
											itemStyle: {
												normal: {
													color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: 'rgba(211,217,219,0.6)' // 0% 处的颜色
													}, {
														offset: 1,
														color: 'rgba(211,217,219,0.4)' // 100% 处的颜色
													}], false),
													// barBorderRadius: [30, 30, 0, 0],
								
													borderColor: 'rgba(211,217,219,1)',
													borderWidth: 1,
													borderType: 'solid',
												}
											},
										},
								
										{
											name: '单量',
											type: 'line',
											yAxisIndex: 1,
											itemStyle: {
												normal: {
													color: '#15c6bd',
													fontSize: that.commonFunction.fontSize(0.12),
												}
											},
											areaStyle: {
												normal: {
													color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
															offset: 0,
															color: 'rgba(21,198,189,0.3)'
														},
														{
															offset: 1,
															color: 'rgba(21,198,189,0)'
														}
													], false),
													shadowColor: 'rgba(21,198,189, 0.9)',
													shadowBlur: 20
												}
											},
											data: datas['danliang']
										}
									]
								};
								myChart.setOption(option)
								window.addEventListener("resize", function() {
									myChart.resize()
								})
								
							} else {
								alert("数据请求错误")
							}

						})
						.catch(function(error) {
							alert(error)
						})
					
				}
			},
			getOutEchartData() {

				const outyewumonthChart = this.$refs.outyewumonthChart;
				if (outyewumonthChart) {
					const myChart = this.$echarts.init(outyewumonthChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy()[0]+'-'+that.commonFunction.getLastYearYestdy()[1];
					var endDate = that.commonFunction.formatDate()[0]+'-'+that.commonFunction.formatDate()[1];
					
					that.$myHttp.get("getBusinessTrendsInfo", {
							params: {
								dtype: 'M',
								start: startDate,
								end: endDate,
								ie: 'E'
							}
						})
						.then(function(data0) {
							if (data0.status == "200") {
								// console.log(data0.data.result.hn_business_trends)
								var getDatas = data0.data.result.hn_business_trends;
								
								var datas = {
									name:[],
									huozhi:[],
									danliang:[],
								};
								getDatas.forEach((item,index)=>{
									datas['name'].push(item.REPORTDATE)
									datas['huozhi'].push((item.GOODVALUE/10000).toFixed(2))
									datas['danliang'].push((item.AMOUNT/10000).toFixed(2))
								})
								// console.log(datas['huozhi'])
								const option = {
									tooltip: {
										trigger: 'axis',
										axisPointer: {
											type: 'cross',
											crossStyle: {
												color: '#999'
											}
										}
									},
								
									legend: {
										data: ['出口货值', '单量'],
										show: true,
										// icon: "plain",
										top: that.commonFunction.fontSize(0.1),
										right: "16%",
										itemWidth: that.commonFunction.fontSize(0.2),
										itemHeight: that.commonFunction.fontSize(0.1),
										itemGap: that.commonFunction.fontSize(0.1),
										textStyle: {
											color: '#fff',
											fontSize: that.commonFunction.fontSize(0.12),
										}
									},
									grid: {
										left: '15%',
										top: '20%',
										bottom: '20%',
										right: '10%'
									},
									xAxis: [{
										type: 'category',
										data: datas['name'],
										axisLabel: {
											margin: 10,
											color: '#fec400',
											textStyle: {
												fontSize: that.commonFunction.fontSize(0.1),
											},
											rotate: '30',
										},
										axisLine: {
											show: false,
											lineStyle: {
												color: '#fec400',
											}
										},
										axisTick: {
											show: false
										},
								
									}],
									yAxis: [{
											type: 'value',
											name: '货值(万元)',
											nameTextStyle: {
												color: '#fff',
												fontSize: that.commonFunction.fontSize(0.12),
												padding: [0, 0, 0, -that.commonFunction.fontSize(0.2)]
											},
											// min: 0,
											// max: 250,
											// interval: 50,
								
											axisLabel: {
												color: '#ffffff80',
												textStyle: {
													fontSize: that.commonFunction.fontSize(0.12),
												},
												// formatter: '{value} ml'
											},
											axisLine: {
												show: false,
											},
											axisTick: {
												show: false
											},
											splitLine: {
												show: true,
												lineStyle: {
													// color: '#ffffff80',
													color: 'rgba(211,217,219,0.6)',
													width: 0.5,
													// type: 'dashed',
												}
											}
										},
										{
											type: 'value',
											name: '单量(万包)',
											nameTextStyle: {
												color: '#00fce6',
												fontSize: that.commonFunction.fontSize(0.12),
												// padding: [-that.commonFunction.fontSize(0.4), 0, 0, that.commonFunction.fontSize(0.4)],
												margin: [-that.commonFunction.fontSize(0.6), 0, 0, that.commonFunction
													.fontSize(0.6)
												],
											},
											// min: 0,
											// max: 25,
											// interval: 5,
											axisLabel: {
												color: '#00fce6',
												textStyle: {
													fontSize: that.commonFunction.fontSize(0.12),
												},
												// formatter: '{value} °C'
											},
											axisLine: {
												show: false,
											},
											axisTick: {
												show: false
											},
											splitLine: {
												lineStyle: {
													// color: '#00fce6',
													color: 'rgba(211,217,219,0.6)',
													width: 0.5,
													// type: 'dashed',
												}
											}
										}
									],
									series: [{
											name: '出口货值',
											type: 'bar',
											data: datas['huozhi'],
											barWidth: '12px',
											itemStyle: {
												normal: {
													color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: 'rgba(211,217,219,0.6)' // 0% 处的颜色
													}, {
														offset: 1,
														color: 'rgba(211,217,219,0.4)' // 100% 处的颜色
													}], false),
													// barBorderRadius: [30, 30, 0, 0],
								
													borderColor: 'rgba(211,217,219,1)',
													borderWidth: 1,
													borderType: 'solid',
												}
											},
										},
								
										{
											name: '单量',
											type: 'line',
											yAxisIndex: 1,
											itemStyle: {
												normal: {
													color: '#15c6bd',
													fontSize: that.commonFunction.fontSize(0.12),
												}
											},
											areaStyle: {
												normal: {
													color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
															offset: 0,
															color: 'rgba(21,198,189,0.3)'
														},
														{
															offset: 1,
															color: 'rgba(21,198,189,0)'
														}
													], false),
													shadowColor: 'rgba(21,198,189, 0.9)',
													shadowBlur: 20
												}
											},
											data: datas['danliang']
										}
									]
								};
								myChart.setOption(option)
								window.addEventListener("resize", function() {
									myChart.resize()
								})
							} else {
								alert("数据请求错误")
							}

						})
						.catch(function(error) {
							alert(error)
						})
					
				}
			}

		}
	}
</script>

<style scoped>
	.inOutyewumonth {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.inOutyewumonthChart {
		width: 100%;
		height: 100%;
		display: block;
	}

	.btnTab {
		position: absolute;
		top: -.25rem;
		right: .5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btnTab>span {
		color: #fff;
		border: 1px solid #fff;
		border-radius: .05rem;
		padding: 0 .12rem;
		font-size: .14rem;
		cursor: pointer;
	}

	.btnTab>span:nth-of-type(2) {
		margin-left: .1rem;
	}

	.btnTab>span.active {
		color: #00FFFF;
		border: 1px solid #00FFFF;
	}
</style>
